<template>
  <div class="my">
    <el-row class="row">
      <Serch :SelectOne="SelectOne" @SelectTwo="SelectTwo" class="serch" />
      <Buttons
        :clickSelect="clickSelect"
        :insert="insert"
        :deleteAll="deleteAll"
        :deleteList="deleteList"
      />
    </el-row>
    <Mylist
      :tableData="list"
      :realTableDate="listTemp"
      :deleteDate="deleteDate"
      :deleteDateBatch="deleteDateBatch"
      :update="update"
      :CurrentChange="CurrentChange"
    />
  </div>
</template>

<script>
import Serch from "@/views/Mall/Serch.vue";
import Mylist from "@/views/Mall/Mylist.vue";
import Buttons from "@/views/Mall/Buttons.vue";
export default {
  data() {
    return {
      list: [],
      listTemp: [
        {
          date: "2022-03-03",
          id: "cd20210901",
          name: "康师傅方便面",
          address: "上海市普陀区金沙江路",
        },
        {
          date: "2022-02-23",
          id: "cd20210902",
          name: "大地方便面",
          address: "成都市普陀区金沙江路",
        },
        {
          date: "2022-03-05",
          id: "cd20210903",
          name: "刘师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          date: "2022-03-20",
          id: "cd20210904",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          date: "2022-02-23",
          id: "cd20210905",
          name: "大地方便面",
          address: "成都市普陀区金沙江路",
        },
        {
          date: "2022-03-05",
          id: "cd20210906",
          name: "刘师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          date: "2022-03-20",
          id: "cd20210907",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          date: "2022-03-20",
          id: "cd20210908",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          date: "2022-03-05",
          id: "cd20210906",
          name: "刘师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          date: "2022-03-20",
          id: "cd20210907",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          date: "2022-03-20",
          id: "cd20210908",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          date: "2022-03-05",
          id: "cd20210906",
          name: "刘师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          date: "2022-03-20",
          id: "cd20210907",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          date: "2022-03-20",
          id: "cd20210908",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
      ],
      query: "",
      deleteList: "",
    };
  },
  components: { Serch, Mylist, Mylist, Buttons },
  methods: {
    SelectOne(value) {
      //开始进行查询
      this.paging();
      this.list = this.list.filter((item) => item.name == value);
      
      // if(this.list.length>)
      this.list = this.list.slice(0, 10); 
    },
    SelectTwo(value) {
      //按钮查询
      //1.点击查询，查询触发父亲身上的方法
      //2.父亲身上的方法调用搜索框的方法
      //3.获取搜索框的方法展示数据
      this.query = value;
    },
    clickSelect() {
      //1.判断本地 this.query 是否为空，不为空则进行查询
      //2.查询后修改本地数据
      if (this.query) {
        this.SelectOne(this.query);
      } else {
        alert("不能进行空搜索");
      }
    },
    insert(obj) {
      //新增一条数据
      //bug 2022-3-23 翻页器总条数未更新，需要页面刷新
      this.listTemp.unshift(obj);
      this.list = this.listTemp;
      this.list = this.list.slice(0, 10);
    },
    deleteDate(id) {
      //删除一条
      this.listTemp = this.listTemp.filter((item) => item !== id);
      this.list=this.listTemp;
    },
    deleteDateBatch(array) {
      //将当前页的准备删除
      this.deleteList = array;
    },
    deleteAll(objArray) {
      //1.将对象数组中的id遍历出来存储在一个Array中
      let arr = [];
      objArray.forEach((element) => {
        arr.unshift(element.id);
      });
      //有问题，将arr数组的内容通item.id对比，存在则删除
      this.listTemp = this.list.filter((item) => !arr.includes(item.id));
      this.list = this.listTemp;
    },
    update(obj) {
      //1.先过滤出不修改的项
      //2.将新修改的内容追加到最上面
      this.listTemp = this.list.filter((item) => item.id !== obj.id);
      this.listTemp.unshift(obj);
      this.list=this.listTemp;
    },
    CurrentChange(pagesize, total) {
      console.log('log11');
      this.list = this.listTemp;
      //显示算法
      //pagesize 1 total 10
      //  pagesize*total
      //1 10 10 20 20 30
      //pagesize*10 pagesize*total
      let temp = 0;
      let max = 0;
      if (pagesize == 1) {
        temp = pagesize - 1;
      } else {
        temp = (pagesize - 1) * 10;
      }
      max = pagesize * total;
      if (max > total) {
        this.list = this.list.slice(temp, max);
      } else {
        this.list = this.list.slice(temp, total);
      }
      //数据放在别的地方
      //1.页数限制抽成一个公共方法
    },
    paging() {
      //paging 分页
      //这是一个页数限制方法
      //1.请求回来的数据放置在listTemp，如果需要展示用list
      //理想效果：
      this.list = this.listTemp;
      //翻页器功能添加上了，增删改查功能需要修改
    },
  },
  created() {
    this.list = this.listTemp;
    this.list = this.list.slice(0, 10);
  },
  updated(){
    // this.listTemp= this.listTemp;
  }
};
</script>

<style lang="scss" scoped>
.my {
  display: flex;
  flex-direction: column;
  .row {
    display: flex;
    flex-direction: row;
  }
  .serch {
    width: 55%;
    margin-right: 1%;
  }
  .pagination {
    //样式需要调整
    display: flex;
    justify-content: center;
    margin-top: 2%;
  }
}
</style>
